<template>
  <div class="allComment">
    <x-header title="全部评论" :left-options="{backText:'',preventGoBack:true}" class='whiteHeader' v-if='categoty' @click.native='goBack'>
    </x-header>
    <div class="commentHead" v-if='categoty'>
      <div class="commentMain">
        <div class="commentLeft">
          <h2>{{commentData.SERVICE_SCORE}}</h2>
          <p>总体点评</p>
        </div>
        <div class="commentRight">
          <div class="commentStar">
            <label>服务态度</label><span v-for='i in 5' :class='{spanActive:commentData.SERVICE_SCORE>(i-1)}'></span>
          </div>
          <div class="commentStar">
            <label>维修效率</label><span v-for='i in 5' :class='{spanActive:commentData.SPEED_SCORE>(i-1)}'></span>
          </div>
        </div>
      </div>
      <div class="commentClass">
        <div class="classItem classItem1" :class='{classItemActive:categoty==="all"}' @click='selectType("all")'>
          全部({{commentData.EVAL_ALL}})
        </div>
        <div class="classItem classItem1" :class='{classItemActive:categoty==="satisfy"}' @click='selectType("satisfy")'>
          满意({{commentData.EVAL_SATISFY}})
        </div>
        <div class="classItem classItem2" :class='{classItemActive1:categoty==="unsatisfy"}' @click='selectType("unsatisfy")'>
          不满意({{commentData.EVAL_UNSATISFY}})
        </div>
        <div class="classItem classItem2" :class='{classItemActive1:categoty==="photo"}' @click='selectType("photo")'>
          有图({{commentData.EVAL_PHOTO}})
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <scroller :on-infinite="infinites" class='myScroller' ref='myScroller' :loadingLayerColor='loadColor'>
      <div class="comments">
        <div class="commentsItem" v-for='(item,index) in commentMess'>
           <div class="comHead">
              <img class="headImg" :src="item.HEADPHOTO" alt="">
              <div class="userName">{{item.USER_NAME | fiterPhone}}</div>
              <div class="star">
                <span v-for='i in Math.ceil(item.SCORE)'></span>
              </div>
              <span class="good" v-if="!item.IS_USER_LIKE" @click="goodAction(item.SERVICE_COMMENT_ID,index,item.LIKE_COUNT)">
                 有用<i style="font-style:normal;margin-left:0.05rem">{{item.LIKE_COUNT}}</i>
              </span>
              <span class="good1" v-if="item.IS_USER_LIKE">
                  <img src="../assets/image/question/good.png" alt="">{{item.LIKE_COUNT}}
              </span>
            </div>
          <div class="comMain">
            <div class="conTitle">
              {{item.CONTENT}}
            </div>
            <div class="comImg">
              <img :src="item.PHOTO1" alt="" @click='showImg' v-if='item.PHOTO1'>
              <img :src="item.PHOTO2" alt="" @click='showImg' v-if='item.PHOTO2'>
              <img :src="item.PHOTO3" alt="" @click='showImg' v-if='item.PHOTO3'>
              <img :src="item.PHOTO4" alt="" @click='showImg' v-if='item.PHOTO4'>
            </div>
            <div class="replayCom" v-if='item.REPLY_CONTENT'>
              <span></span>
              {{item.REPLY_CONTENT}}
            </div>
          </div>
          <div class="comFooter">
            <p>{{item.CREATE_TIME | filterTimes}}</p>
          </div>
        </div>
      </div>
    </scroller>
    <div v-if='commentMess&&commentMess.length==0' class="noComment">
      <img src="../assets/image/carProduct/noComment.png" alt="" />
      <p>暂无评论</p>
      <p>购买后快来发表评论吧</p>
    </div>
     <confirm v-model="confirmVisible" title="提示" @on-confirm="goLogin">
      <p style="text-align:center;">您当前尚未登录，现在前往登录？</p>
    </confirm>
  </div>
</template>
<script>
import {XHeader,Confirm} from 'vux';
import { setCookie, getCookie } from '../util/commonUtils';
export default {
  name:"allComment",
  // 数据
  data(){
    return{
      userId:'',
      commentMess:'',
      shopIds:this.shopId, //商品id
      page:1,  //当前页数
      loadColor:'#fff',
      confirmVisible:false,
    }
  },
  props:['shopId','categoty','commentData'],
  // 计算属性
  computed:{

  },
  watch:{
    shopId(val) {
      this.shopIds=val;
    }
  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.getComment();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
     goLogin() {
      this.$router.push('/login');
    },
     goodAction(id,index,count){
       if(!this.userId) {
          this.confirmVisible = true;
          return;
        }
      let obj={};
      obj.SERV_ID = this.shopId;
      obj.USER_ID = this.userId;
      obj.SERV_COMMENT_ID = id;
      this.$set(this.commentMess[index],'IS_USER_LIKE',1)
       this.$set(this.commentMess[index],'LIKE_COUNT',count+1)
      this.$fetchPost('ServCommentWeb/userOrderCommentLike',obj).then(res=>{
          console.log(res)
      },err=>{
        console.log(err)
      })
    },
    goBack(){
      this.$emit('close-all');
    },
    selectType(types){
      this.$emit('update:select-type',types);
      this.page=1;
      this.$nextTick(function(){
        this.getComment();
      })
    },
    //获取评论数
    getComment(){
      this.$vux.loading.show({text: '加载中'});
      if(this.categoty){
        this.$fetchPost('/ServCommentWeb/getCommentsByShop.action',{COMP_ID:this.shopIds,PAGE_NO:this.page,PAGE_SIZE:10,CATEGORY:this.categoty}).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            if(res.RESULT_DATA.length==0){
              this.loadColor='#fff';
              this.$refs.myScroller.finishInfinite(2);
              this.commentMess=res.RESULT_DATA;
              return;
            }else{
              this.loadColor='#aaa';
              this.$refs.myScroller.finishInfinite();
              this.commentMess=res.RESULT_DATA;
              this.page++;
            }
          }
        },err=>{
          console.log(err);
        })
      }else{
        this.$fetchPost('/ServComment/getServDetailComment.action',{USER_ID:this.userId,SERV_ID:this.shopIds,PAGE_NO:this.page,PAGE_SIZE:10}).then(res=>{
          if(res.STATUS_CODE==1){
            this.$vux.loading.hide();
            if(res.RESULT_DATA.length==0){
              this.loadColor='#fff';
              this.$refs.myScroller.finishInfinite();
              this.commentMess=res.RESULT_DATA;
              return;
            }else{
              this.loadColor='#aaa';
              this.$refs.myScroller.finishInfinite();
              this.commentMess=res.RESULT_DATA;
              this.page++;
            }
          }
        },err=>{
          console.log(err);
        })
      }

    },
    //上拉加载更多评论
    infinites(){
      if(this.page==1){
        return;
      }
      if(this.categoty){
        this.loadColor='#aaa';
        this.$fetchPost('/ServCommentWeb/getCommentsByShop.action',{COMP_ID:this.shopIds,PAGE_NO:this.page,PAGE_SIZE:10,CATEGORY:this.categoty}).then(res=>{
          if(res.STATUS_CODE==1){
            this.loadColor='#aaa';
            if(res.RESULT_DATA.length==0){
              this.$refs.myScroller.finishInfinite(2);
              return;
            }else{
              this.$refs.myScroller.finishInfinite();
              this.commentMess=this.commentMess.concat(res.RESULT_DATA);
              this.page++;
            }
          }
        },err=>{
          console.log(err);
        })
      }else{
       this.$fetchPost('/ServComment/getServDetailComment.action',{SERV_ID:this.shopIds,PAGE_NO:this.page,PAGE_SIZE:10}).then(res=>{
          if(res.STATUS_CODE==1){
            this.loadColor='#aaa';
            if(res.RESULT_DATA.length==0){
              this.$refs.myScroller.finishInfinite(2);
              return;
            }else{
              this.$refs.myScroller.finishInfinite();
              this.commentMess=this.commentMess.concat(res.RESULT_DATA);
              this.page++;
            }
          }
        },err=>{
          console.log(err);
        })
      }
    },
    //点击图片全屏显示
    showImg (e) {
        var commentImgBg = document.createElement('div');
        commentImgBg.style.cssText = 'position: fixed;\
                                      top: 0;\
                                      left: 0;\
                                      right: 0;\
                                      bottom: 0;\
                                      z-index:999;\
                                      background-color: #000;';
        var commentImg = document.createElement('img');
        commentImg.style.cssText = 'width: 100%;\
                                    position: fixed;\
                                    left: 50%;\
                                    top: 50%;\
                                    -webkit-transform: translate(-50%,-50%);\
                                    transform: translate(-50%,-50%);'
        commentImg.src = e.target.src;
        commentImgBg.appendChild(commentImg);

        commentImgBg.onclick = function () {
          document.body.removeChild(commentImgBg)
        }
        document.body.appendChild(commentImgBg)
    }
  },
  // 子组件
  components:{
    XHeader,
    Confirm
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../assets/css/public.less');
.allComment{
  padding-top: 1rem;
  background: #fff;
  .noComment{
    padding: 0.2rem 0;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    transform:translate(-50%,-50%);
    img{
      width: 1.03rem;
      height: 1.33rem;
      display: block;
      margin: 0 auto 0.3rem;
    }
    p{
      font-size: 0.25rem;
      color: #999;
      padding: 0.05rem 0;
    }
  }
  .comments{
      padding-left: 0.2rem;
      h1{
        font-size: 0.3rem;
        color: #a4a6ad;
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: left;
        .borderBFu(#e3e3e3);
      }
      .commentsItem{
        padding-right: 0.2rem;
        .borderBFu(#e3e3e3);
        .comHead{
            position: relative;
          .headImg{
            height:0.6rem;
            width:0.6rem;
            border-radius:50%;
            position: absolute;
            top: 0.3rem;
            left: 0;
          }
          .star{
            padding-left: .76rem;
            display: flex;
            span{
              width: 0.2rem;
              height: 0.2rem;
              margin: 0.15rem 0.05rem;
              background: url(../assets/image/carProduct/star.png) no-repeat;
              background-size: 0.2rem 0.2rem;
            }
          }
          .userName{
            font-size: 0.2rem;
            text-align: left;
            padding-top: 0.3rem;
            padding-left: .76rem;

          }
          .good{
            position: absolute;
            top: .4rem;
            right: 0;
            font-size:0.23rem;
            line-height: 0.42rem;
            height: 0.44rem;
             width: 1.1rem;
            color:#666666;
            border:1px solid #aaaaaa;
            border-radius: .22rem;
          }
          .good1{
            img{
              width: 0.28rem;
              height: 0.28rem;
              margin-top: -3px;
             margin-right: 0.05rem;
             vertical-align: middle;
            }
            position: absolute;
            top: .4rem;
            right: 0;
            font-size:0.23rem;
            line-height: 0.42rem;
            height: 0.44rem;
            width: 1.1rem;
            color:#f22e2e;
            border:1px solid #f22e2e;
            border-radius: .22rem;

          }
        }
        .comMain{
          padding:0.1rem 0;
          .conTitle{
            text-align: left;
            font-size: 0.28rem;
            color: #1a1a1b;
          }
          .comImg{
            font-size: 0;
            text-align: left;
            img{
              width: 1.75rem;
              height: 1.75rem;
              border-radius: 0.2rem;
              padding: 2% .1rem;
              box-sizing: border-box;
            }
          }
          .replayCom{
            width: 96%;
            padding: 0.1rem;
            border-radius: 0.1rem;
            margin: 0.18rem auto 0.05rem;
            color: #999;
            background: #e6e6e6;
            font-size: 0.3rem;
            text-align: left;
            position: relative;
            span{
              border:0.2rem solid #e6e6e6;
              border-width: 0.2rem 0.2rem 0 0;
              transform:rotate(45deg);
              position: absolute;
              top: -0.1rem;
              left: 0.4rem;
              background: #e6e6e6;
            }
          }
        }
        .comFooter{
          padding: 0.1rem 0 0.2rem 0;
          p{
            font-size: 0.25rem;
            text-align: left;
          }
        }
      }
  }
  .commentHead{
    width: 7.5rem;
    padding: 0.2rem 0.28rem;
    background: #fff;
    position: relative;
    border-bottom: 0.2rem solid #efeff4;
    z-index: 99;
    .commentClass{
      display: flex;
      justify-content:space-around;
      .classItem{
        width: 1.57rem;
        height: 0.56rem;
        font-size: 0.22rem;
        line-height: 0.56rem;
        border-radius: 0.08rem;
      }
      .classItem1{
        color: #232325;
        background: #fdd9d9;
      }
      .classItemActive{
        color: #fff;
        background: #F14043;
      }
      .classItem2{
        color: #232325;
        background: #F0F2F5;
      }
      .classItemActive1{
        color: #fff;
        background: #999;
      }
    }
    .commentMain{
      display: flex;
      margin: 0 0 0.2rem;
      height: 1.4rem;
      align-items: center;
      padding: 0.2rem 0;
      .commentLeft{
        width: 2rem;
        height: 1rem;
        .borderRFu(#E2E2E2);
        h2{
          font-size: 0.43rem;
          color:#FC0D1B;
          font-weight: bold;
          margin:0.1rem 0;
        }
        p{
          font-size: 0.2rem;
          color: #ADADAD 100%;
        }
      }
      .commentRight{
        height: 1rem;
        padding-left: 0.2rem;
        .commentStar{
          height: 0.45rem;
          line-height: 0rem;

        }
        .commentStar:first-child{
          margin-bottom:0.1rem;
          margin-top: -0.05rem;
        }
        label{
          font-size: 0.28rem;
          color: #666666;
          padding-right: 0.15rem;
        }
        span{
          display: inline-block;
          width:0.26rem;
          height: 0.24rem;
          background: url(../assets/image/cafe/grayStar.png) no-repeat;
          background-size: 0.26rem 0.24rem;
        }
        .spanActive{
          background: url(../assets/image/cafe/star.png) no-repeat;
          background-size: 0.26rem 0.24rem;
        }
      }
    }
    h1{
      font-size: 0.28rem;
      color: #171717;
      text-align: left;
      padding: 0.05rem 0.1rem;
      border-left: 0.06rem solid #FC0D1B;
      margin-bottom: 0.2rem;
    }
  }
}
</style>
